<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站顶部多级栏目导航</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      background-color: #f5f5f5;
    }
    
    .content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      color: #666;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 导航通用样式 */
    .top-nav {
      background-color: white;
      border-bottom: 1px solid #eee;
      position: relative;
      z-index: 100;
    }
    
    /* 一级栏目样式 */
    .level-1 {
      height: 56px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      justify-content: space-between;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }
    
    .nav-btn {
      background: none;
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      font-size: 20px;
    }
    
    .nav-btn:hover {
      background-color: #f0f0f0;
    }
    
    .nav-logo {
      font-size: 20px;
      font-weight: 700;
      color: #4263EB;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    /* 二级栏目通用样式 */
    .level-2 {
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 0 16px;
      background-color: white;
    }
    
    .level-2::-webkit-scrollbar {
      display: none;
    }
    
    .level-2-item {
      padding: 12px 16px;
      font-size: 15px;
      color: #666;
      white-space: nowrap;
      text-decoration: none;
      position: relative;
    }
    
    .level-2-item.active {
      color: #4263EB;
      font-weight: 500;
    }
    
    /* 二级栏目指示器样式 */
    .indicator-line .level-2-item.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: #4263EB;
      border-radius: 3px 3px 0 0;
    }
    
    .indicator-dot .level-2-item.active::after {
      content: '';
      position: absolute;
      bottom: 6px;
      left: 50%;
      transform: translateX(-50%);
      width: 6px;
      height: 6px;
      background-color: #4263EB;
      border-radius: 50%;
    }
    
    /* 搜索栏样式 */
    .search-container {
      padding: 12px 16px;
      background-color: #f5f5f5;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }
    
    .search-bar {
      width: 100%;
      height: 36px;
      background-color: white;
      border-radius: 18px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      font-size: 14px;
      color: #999;
      border: 1px solid #eee;
    }
    
    .search-bar i {
      margin-right: 8px;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 70px;
      right: 10px;
      z-index: 1001;
      background: white;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: #4263EB;
      color: white;
    }
    
    /* 场景特定样式 */
    /* 1. 基础两级标签式 */
    #style1 .level-2 {
      border-top: 1px solid #eee;
    }
    
    /* 2. 带搜索的两级导航 */
    #style2 .level-1 {
      border-bottom: none;
    }
    
    /* 3. 下拉菜单式二级栏目 */
    #style3 .dropdown-menu {
      position: absolute;
      top: 56px;
      left: 0;
      width: 100%;
      background-color: white;
      border: none;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      padding: 8px 0;
      display: none;
    }
    
    #style3 .dropdown-menu.show {
      display: block;
    }
    
    #style3 .level-2-item {
      display: block;
      padding: 12px 20px;
    }
    
    #style3 .level-2 {
      display: block;
      overflow-x: visible;
    }
    
    /* 4. 深色模式两级导航 */
    #style4 {
      background-color: #121212;
    }
    
    #style4 .content {
      background-color: #121212;
      color: #aaa;
    }
    
    #style4 .top-nav,
    #style4 .level-1,
    #style4 .level-2,
    #style4 .search-container {
      background-color: #1e1e1e;
      border-color: #333;
    }
    
    #style4 .nav-btn, 
    #style4 .nav-title, 
    #style4 .nav-logo,
    #style4 .level-2-item {
      color: #ddd;
    }
    
    #style4 .level-2-item.active {
      color: #58a9ff;
    }
    
    #style4 .indicator-line .level-2-item.active::after {
      background-color: #58a9ff;
    }
    
    #style4 .indicator-dot .level-2-item.active::after {
      background-color: #58a9ff;
    }
    
    #style4 .search-bar {
      background-color: #333;
      border-color: #444;
      color: #aaa;
    }
    
    #style4 .style-switcher {
      background-color: #1e1e1e;
    }
    
    /* 5. 图标+文字二级栏目 */
    #style5 .level-2-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    #style5 .level-2-icon {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">基础两级</button>
    <button class="style-btn" data-style="style2">带搜索</button>
    <button class="style-btn" data-style="style3">下拉菜单</button>
    <button class="style-btn" data-style="style4">深色模式</button>
    <button class="style-btn" data-style="style5">图标文字</button>
  </div>
  
  <!-- 1. 基础两级标签式 -->
  <div id="style1" class="page-style active">
    <div class="top-nav">
      <!-- 一级栏目 -->
      <div class="level-1">
        <button class="nav-btn" id="menuBtn1">
          <i class="fa fa-bars"></i>
        </button>
        <h1 class="nav-title">内容中心</h1>
        <button class="nav-btn" id="createBtn1">
          <i class="fa fa-plus"></i>
        </button>
      </div>
      
      <!-- 二级栏目 -->
      <div class="level-2 indicator-line">
        <a href="#" class="level-2-item active">全部</a>
        <a href="#" class="level-2-item">文章</a>
        <a href="#" class="level-2-item">图片</a>
        <a href="#" class="level-2-item">视频</a>
        <a href="#" class="level-2-item">话题</a>
        <a href="#" class="level-2-item">活动</a>
      </div>
    </div>
    
    <div class="content">
      <div>
        <h3>基础两级标签式导航</h3>
        <p>一级栏目含标题和功能按钮</p>
        <p>二级栏目为横向滚动标签，带下划线指示器</p>
      </div>
    </div>
  </div>
  
  <!-- 2. 带搜索的两级导航 -->
  <div id="style2" class="page-style">
    <div class="top-nav">
      <!-- 一级栏目 -->
      <div class="level-1">
        <button class="nav-btn" id="backBtn2">
          <i class="fa fa-arrow-left"></i>
        </button>
        <div class="nav-logo">
          <i class="fa fa-connectdevelop"></i>
          <span>社交圈</span>
        </div>
        <button class="nav-btn" id="msgBtn2">
          <i class="fa fa-envelope-o"></i>
        </button>
      </div>
      
      <!-- 搜索区域（作为二级内容） -->
      <div class="search-container">
        <div class="search-bar">
          <i class="fa fa-search"></i>
          <span>搜索感兴趣的内容...</span>
        </div>
      </div>
      
      <!-- 二级栏目 -->
      <div class="level-2 indicator-dot">
        <a href="#" class="level-2-item active">推荐</a>
        <a href="#" class="level-2-item">关注</a>
        <a href="#" class="level-2-item">热门</a>
        <a href="#" class="level-2-item">附近</a>
        <a href="#" class="level-2-item">最新</a>
      </div>
    </div>
    
    <div class="content">
      <div>
        <h3>带搜索的两级导航</h3>
        <p>一级栏目为品牌标识和功能按钮</p>
        <p>中间级为搜索区域，二级为带点指示器的标签</p>
      </div>
    </div>
  </div>
  
  <!-- 3. 下拉菜单式二级栏目 -->
  <div id="style3" class="page-style">
    <div class="top-nav">
      <!-- 一级栏目 -->
      <div class="level-1">
        <button class="nav-btn" id="backBtn3">
          <i class="fa fa-arrow-left"></i>
        </button>
        <div class="nav-title dropdown-toggle" id="dropdownToggle3">
          好友动态 <i class="fa fa-chevron-down" style="font-size: 14px; margin-left: 6px;"></i>
        </div>
        <button class="nav-btn" id="moreBtn3">
          <i class="fa fa-ellipsis-v"></i>
        </button>
      </div>
      
      <!-- 二级栏目（下拉菜单） -->
      <div class="dropdown-menu" id="dropdownMenu3">
        <div class="level-2">
          <a href="#" class="level-2-item active">全部好友</a>
          <a href="#" class="level-2-item">特别关注</a>
          <a href="#" class="level-2-item">最近互动</a>
          <a href="#" class="level-2-item">同城好友</a>
          <a href="#" class="level-2-item">大学同学</a>
          <a href="#" class="level-2-item">同事</a>
        </div>
      </div>
    </div>
    
    <div class="content">
      <div>
        <h3>下拉菜单式二级栏目</h3>
        <p>点击一级栏目标题可展开/收起二级菜单</p>
        <p>适合二级选项较多的场景</p>
      </div>
    </div>
  </div>
  
  <!-- 4. 深色模式两级导航 -->
  <div id="style4" class="page-style">
    <div class="top-nav">
      <!-- 一级栏目 -->
      <div class="level-1">
        <button class="nav-btn" id="backBtn4">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="nav-title">消息中心</h1>
        <button class="nav-btn" id="settingsBtn4">
          <i class="fa fa-cog"></i>
        </button>
      </div>
      
      <!-- 二级栏目 -->
      <div class="level-2 indicator-line">
        <a href="#" class="level-2-item active">全部消息</a>
        <a href="#" class="level-2-item">评论</a>
        <a href="#" class="level-2-item">点赞</a>
        <a href="#" class="level-2-item">关注</a>
        <a href="#" class="level-2-item">系统通知</a>
      </div>
    </div>
    
    <div class="content">
      <div>
        <h3>深色模式两级导航</h3>
        <p>深色背景设计，降低夜间视觉疲劳</p>
        <p>保持一致的层级导航结构</p>
      </div>
    </div>
  </div>
  
  <!-- 5. 图标+文字二级栏目 -->
  <div id="style5" class="page-style">
    <div class="top-nav">
      <!-- 一级栏目 -->
      <div class="level-1">
        <button class="nav-btn" id="menuBtn5">
          <i class="fa fa-bars"></i>
        </button>
        <h1 class="nav-title">个人中心</h1>
        <button class="nav-btn" id="editBtn5">
          <i class="fa fa-edit"></i>
        </button>
      </div>
      
      <!-- 二级栏目 -->
      <div class="level-2 indicator-line">
        <a href="#" class="level-2-item active">
          <i class="fa fa-user level-2-icon"></i>
          <span>资料</span>
        </a>
        <a href="#" class="level-2-item">
          <i class="fa fa-bookmark level-2-icon"></i>
          <span>收藏</span>
        </a>
        <a href="#" class="level-2-item">
          <i class="fa fa-clock-o level-2-icon"></i>
          <span>历史</span>
        </a>
        <a href="#" class="level-2-item">
          <i class="fa fa-star level-2-icon"></i>
          <span>点赞</span>
        </a>
        <a href="#" class="level-2-item">
          <i class="fa fa-cog level-2-icon"></i>
          <span>设置</span>
        </a>
      </div>
    </div>
    
    <div class="content">
      <div>
        <h3>图标+文字二级栏目</h3>
        <p>二级栏目包含图标和文字，提升识别效率</p>
        <p>适合功能型二级分类</p>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 风格切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的风格页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.page-style').forEach(style => {
          style.style.display = 'none';
        });
        document.getElementById(styleId).style.display = 'flex';
        document.getElementById(styleId).style.flexDirection = 'column';
      });
    });
    
    // 二级栏目点击事件
    document.querySelectorAll('.level-2-item').forEach(item => {
      item.addEventListener('click', function(e) {
        e.preventDefault();
        
        // 移除同组中其他项的active类
        const siblings = this.parentElement.querySelectorAll('.level-2-item');
        siblings.forEach(sib => sib.classList.remove('active'));
        
        // 为当前点击项添加active类
        this.classList.add('active');
        
        // 显示当前选中的栏目
        const styleId = this.closest('.page-style').id;
        const contentArea = document.querySelector(`#${styleId} .content p:last-child`);
        contentArea.textContent = `已切换到${this.textContent.trim()}栏目`;
      });
    });
    
    // 下拉菜单切换
    const dropdownToggle = document.getElementById('dropdownToggle3');
    const dropdownMenu = document.getElementById('dropdownMenu3');
    
    dropdownToggle.addEventListener('click', function() {
      dropdownMenu.classList.toggle('show');
      const chevron = this.querySelector('.fa-chevron-down');
      chevron.style.transform = dropdownMenu.classList.contains('show') ? 'rotate(180deg)' : 'rotate(0)';
    });
    
    // 导航按钮点击事件
    document.querySelectorAll('.nav-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const icon = this.querySelector('i').className;
        let action = '';
        
        if (icon.includes('bars')) action = '菜单已打开';
        else if (icon.includes('plus')) action = '创建内容面板已打开';
        else if (icon.includes('arrow-left')) action = '已返回上一页';
        else if (icon.includes('envelope')) action = '消息中心已打开';
        else if (icon.includes('ellipsis')) action = '更多选项已打开';
        else if (icon.includes('cog')) action = '设置页面已打开';
        else if (icon.includes('edit')) action = '编辑模式已开启';
        
        // 显示操作反馈
        const styleId = this.closest('.page-style').id;
        const contentArea = document.querySelector(`#${styleId} .content p:nth-child(3)`);
        if (contentArea) contentArea.textContent = action;
      });
    });
    
    // 初始化 - 隐藏所有风格，只显示默认风格
    document.querySelectorAll('.page-style').forEach((style, index) => {
      if (index !== 0) {
        style.style.display = 'none';
      } else {
        style.style.display = 'flex';
        style.style.flexDirection = 'column';
      }
    });
  </script>
</body>
</html>
